<template>
  <el-dialog title="上传图片"
             :visible="isshow"
             width="640px"
             append-to-body
             @close="isshow=false">
    <div class="croperimg">
      <div class="cropper-content">
        <div class="cropper">
          <vueCropper ref="cropper"
                      :img="option.img"
                      :outputSize="option.size"
                      :outputType="option.outputType"
                      :info="true"
                      :full="option.full"
                      :canMove="option.canMove"
                      :canMoveBox="option.canMoveBox"
                      :original="option.original"
                      :autoCrop="option.autoCrop"
                      :autoCropWidth="option.autoCropWidth"
                      :autoCropHeight="option.autoCropHeight"
                      :fixedBox="option.fixedBox"
                      @realTime="realTime"
                      @imgLoad="imgLoad"></vueCropper>
        </div>
        <!-- 预览 -->
        <div class="show-preview-box">
          <div class="show-preview"
               :style="{ width: previews.w + 'px', height: previews.h + 'px',overflow: 'hidden',marginBottom: '10px'}">
            <div :style="{width: previews.w + 'px', height: previews.h + 'px'}"
                 class="preview">
              <img :src="previews.url"
                   :style="previews.img" />
            </div>
          </div>
          <div class="show-preview"
               :style="{ width: previews.w + 'px', height: previews.h + 'px',overflow: 'hidden',marginBottom: '5px'}">
            <div :style="{width: previews.w + 'px', height: previews.h + 'px'}"
                 class="preview circle">
              <img :src="previews.url"
                   :style="previews.img" />
            </div>
          </div>
        </div>
      </div>
      <div class="footer-btn">
        <div class="scope-btn">
          <div class="change-img">
            <el-button size="small">更换图片</el-button>
            <input type="file"
                   id="uploads"
                   accept="image/png, image/jpeg, image/gif, image/jpg"
                   @change="choseImg($event,1)" />
          </div>
          <el-button type="primary"
                     size="small"
                     plain
                     circle
                     @click="changeScale(1)"
                     icon="el-icon-zoom-in"></el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     circle
                     @click="changeScale(-1)"
                     icon="el-icon-zoom-out"></el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     circle
                     @click="rotateLeft"
                     icon="el-icon-refresh-left"></el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     circle
                     @click="rotateRight"
                     icon="el-icon-refresh-right"></el-button>
        </div>
        <div class="upload-btn">
          <el-button type="warning"
                     size="small"
                     icon="el-icon-download"
                     @click="down('blob')">下载</el-button>
          <el-button type="success"
                     size="small"
                     icon="el-icon-upload"
                     @click="uploadImg()">上传</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { uploadImg } from '@/api'
export default {
  name: 'Cropperimg',
  props: {
    imgbox: {
      type: Object,
      default() {
        return {
          isshow: false
        }
      }
    },
    mark: { // 提交给服务器端的字段
      type: String,
      default: 'avatar'
    }
  },
  data() {
    return {
      isshow: false,
      crap: false,
      previews: {},
      option: {
        img: '',
        size: 1,
        full: false, // 输出原图比例截图 props名full
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true
      },
      downImg: '#'
    }
  },
  methods: {
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    finish(type) {
      // 输出
      // var test = window.open('about:blank')
      // test.document.body.innerHTML = '图片生成中..'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          var img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    // 实时预览函数
    realTime(data) {
      this.previews = data
    },
    down(type) {
      // event.preventDefault()
      var aLink = document.createElement('a')
      aLink.download = 'author-img'
      // 输出
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data)
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data
          aLink.href = data
          aLink.click()
        })
      }
    },
    choseImg(e, num) { // 选择图片
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      if (file.size > (1024 * 1024) * 2) {
        alert('图片不能超过2M')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          this.option.img = data
        } else if (num === 2) {
          this.example2.img = data
        }
      }
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file)
    },
    imgLoad(msg) {
      console.log(msg)
    },
    uploadImg() {
      this.$refs.cropper.getCropData(async(data) => {
        const res = await uploadImg({
          file: data,
          filename: 'icon.png'
        })
        this.$emit('upload', res)
      })
    }
  },
  components: { VueCropper }
}
</script>
<style scoped lang="scss">
.croperimg{
    width: 600px;
    background-color: #fff;
}
.cropper-content{
  display: flex;
  .cropper{
    width: 400px;
    height: 300px;
  }
  .show-preview-box{
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 30px;
    .preview{
      overflow: hidden;
      border:1px solid #cccccc;
      padding:4px;
      box-sizing: border-box;
      background: #cccccc;
    }
    .preview.circle{
        border-radius: 50%;
    }
  }
}
.footer-btn{
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  .scope-btn{
    width: 350px;
    display: flex;
    justify-content: space-between;
    position: relative;
    #uploads{
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 80px;
        height: 32px;
        z-index: 100;
    }
  }
  .upload-btn{
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
  }
}
</style>
